<template>
  <div>
    <el-breadcrumb v-if="!$route.meta.desktop" separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, i) in breadList" :key="i" :to="{path:item.path}"
        >{{ item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div v-if="$route.meta.desktop" style="padding:0px;">
      <router-view />
    </div>
    <div v-else :style="{padding:'10px',height:bodyHeight-60-48-48-20+'px'}" class="container-main">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bodyHeight: document.documentElement.clientHeight,
    };
  },
  computed: {
    breadList() {
      let temp = [],
        temps = [];
      this.$route.matched.filter((item, index, self) => {
        if (item.meta) {
          const name = item.meta.title;
          temp.push({name,path:item.path});
        }
      });
      temp.filter((item, index, self) => {
        if (!temps.includes(item)) {
          temps.push(item);
        }
      });
      return temps;
    },
  },
  mounted() {
    const that = this;
    //根据窗口大小调整
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        that.bodyHeight = window.fullHeight;
      })();
    };
  },
};
</script>

<style lang="less" scoped>
.breadcrumb {
  background-color: #dfe7eb;
  padding: 17px;
}
.container-main {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
